<!DOCTYPE HTML >
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="/WEB-INF/include/taglib.jsp" %>
<html>
  <head>
      <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="${ctxRoot}/static/wedding/css/reset.css">
    <link rel="stylesheet" type="text/css" href="${ctxRoot}/static/wedding/css/index.css">
    <script type="text/javascript" src="${ctxRoot}/static/wedding/js/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="${ctxRoot}/static/wedding/js/jquery-ui-1.10.2.custom.js"></script>
    <script type="text/javascript" src="${ctxRoot}/static/wedding/js/index.js"></script>
      <script type="text/javascript">

          //读取祝福语
          function getBlessing(){
              $.ajax({
                  url:"${ctxRoot}/get_blessings.do",
                  type:"post",
                  dataType:"json",
                  success:function(result){
                      $.each(result,function(index,ele){
                          var blessing = ele.blessing;
                          $("div[class='seven-content']").append('<div class="note-'+(Math.floor(Math.random()*6)+1)+'">'+blessing+'</div>');
                          draggableNote();
                      });
                  },
                  error:function(){
                  }
              });
          }
          //添加祝福语
          function setBlessing(obj){
              var blessing = $("#write").val();
              if(blessing != null){
                  $.ajax({
                      url:"${ctxRoot}/set_blessings.do",
                      type:"post",
                      data:"blessing="+blessing,
                      dataType:"json",
                      success:function(result){

                      },
                      error:function(){
                          alert("error")
                      }
                  });
              }
          }
      </script>
  </head>
  
  <body>
  <!--[if ie 6]>
  <style type="text/css">
      .mask {position: absolute; height: 800px;}
      .pop-box {_position: absolute;}
  </style>
  <![endif]-->
    <div class="container" >
        <!-- 移动的婚车 -->
        <div class="car">
            <img class="u-car" src="${ctxRoot}/static/wedding/images/moveCar.png"/>
            <img class="u-dog" src="${ctxRoot}/static/wedding/images/ballon.gif"/>
        </div>

        <!-- 首页 -->
        <div class="home">
            <div class="nav">
                <ul>
                    <li><span id="to-picture">相册</span></li>
                    <li><span id="to-invitation">邀请函</span></li>
                    <li><span id="to-wall" onclick="getBlessing()">祝福墙</span></li>
                    <li><span id="to-address">婚礼地点</span></li>
                    <li><a href="${ctxRoot}/main/index.do"><span>战队首页</span></a></li>
                </ul>
            </div>
        </div>

        <!-- 邀请函 -->
        <div class="invitation">
            <!--<span id="invite-return" class="u-return">返回首页</span>-->
            <img class="u-return" id="invite-return" src="${ctxRoot}/static/wedding/images/btn_return.png"/>
            <div class="invitation-content"></div>
        </div>

        <!-- 婚纱照 -->
        <div class="wedding-photos">
            <div><img src="${ctxRoot}/static/wedding/images/photo1.jpg"/></div>
            <div><img src="${ctxRoot}/static/wedding/images/photo2.jpg"/></div>
            <div><img src="${ctxRoot}/static/wedding/images/photo3.jpg"/></div>
            <div><img src="${ctxRoot}/static/wedding/images/photo4.jpg"/></div>
            <div><img src="${ctxRoot}/static/wedding/images/photo5.jpg"/></div>
        </div>

        <!-- 场景六 -->
        <div class="six-box">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>

        <!-- 场景七祝福墙内容 -->
        <div class="seven-box">
            <img id="blessing-return" class="u-return" src="${ctxRoot}/static/wedding/images/btn_return.png"/>
            <div class="clickMe">点我送祝福</div>
            <div class="seven-content">
                <%--<div class="note-a1"></div>--%>
                <%--<div class="note-a2"></div>--%>
                <%--<div class="note-a3"></div>--%>
                <%--<div class="note-a4"></div>--%>
                <%--<div class="note-a5"></div>--%>
                <%--<div class="note-a6"></div>--%>
                <%--<div class="note-a7"></div>--%>
                <%--<div class="note-a8"></div>--%>
                <%--<div class="note-a9"></div>--%>
                <%--<div class="note-a10"></div>--%>
                <%--<div class="note-a11"></div>--%>
                <%--<div class="note-a12"></div>--%>
                <%--<div class="note-1">一定要幸福哦~</div>--%>
                <%--<div class="note-2">祝你们白头偕老！</div>--%>
                <%--<div class="note-3">早生贵子~</div>--%>
                <%--<div class="note-4">新婚快乐~</div>--%>
                <%--<div class="note-5">生个宝宝认我做干妈！</div>--%>
                <%--<div class="note-6">喜结良缘O(∩_∩)O哈哈哈~</div>--%>
                <%--<div class="note-1">一定要幸福哦~</div>--%>
                <%--<div class="note-2">祝你们白头偕老！</div>--%>
                <%--<div class="note-3">早生贵子~</div>--%>
                <%--<div class="note-4">新婚快乐~</div>--%>
                <%--<div class="note-5">生个宝宝认我做干妈！</div>--%>
                <%--<div class="note-6">喜结良缘O(∩_∩)O哈哈哈~</div>--%>
            </div>
        </div>


        <!-- 照片墙 -->
        <div class="picture-wall">
            <img class="u-return" id="picture-return" src="${ctxRoot}/static/wedding/images/btn_return.png"/>
            <div class="pic0 picRow"><img src="${ctxRoot}/static/wedding/images/pic0.jpg"/></div>
            <div class="pic1 picRow"><img src="${ctxRoot}/static/wedding/images/pic1.jpg"/></div>
            <div class="pic2 picCol"><img src="${ctxRoot}/static/wedding/images/pic2.jpg"/></div>
            <div class="pic3 picCol"><img src="${ctxRoot}/static/wedding/images/pic3.jpg"/></div>
            <div class="pic4 picCol"><img src="${ctxRoot}/static/wedding/images/pic4.jpg"/></div>
            <div class="pic5 picCol"><img src="${ctxRoot}/static/wedding/images/pic5.jpg"/></div>
            <div class="pic6 picRow"><img src="${ctxRoot}/static/wedding/images/pic6.jpg"/></div>
            <div class="pic7 picRow"><img src="${ctxRoot}/static/wedding/images/pic7.jpg"/></div>
            <div class="pic8 picRow"><img src="${ctxRoot}/static/wedding/images/pic8.jpg"/></div>
            <div class="pic9 picCol"><img src="${ctxRoot}/static/wedding/images/pic9.jpg"/></div>
            <div class="pic10 picCol"><img src="${ctxRoot}/static/wedding/images/pic10.jpg"/></div>
            <div class="pic11 picRow"><img src="${ctxRoot}/static/wedding/images/pic11.jpg"/></div>
        </div>


        <!-- 婚礼地址 -->
        <div class="address">
            <img class="u-return" id="address-return" src="${ctxRoot}/static/wedding/images/btn_return.png"/>
            <img class="u-love" src="${ctxRoot}/static/wedding/images/love.gif"/>
            <img src="${ctxRoot}/static/wedding/images/address.jpg"/>
        </div>

    </div>

    <!-- 遮罩层 -->
    <div class="mask"></div>
    <div class="pop-box">
        <h1>送上祝福语</h1>
        <textarea id="write">写上您的祝福吧~</textarea>
        <div class="u-sure" id="uSure" onclick="setBlessing(this)">确定</div>
    </div>

    <!-- 背景音乐 -->
    <embed src="http://www.youxiren.com/upload/image/20140102/ezjzw.mp3" width="0" height="0" autostart="true" loop="true">
    <object data="http://www.youxiren.com/upload/image/20140102/ezjzw.mp3" type="application/x-mplayer2" width="0" height="0">    
        <param name="src" value="music.mp3">
        <param name="autostart" value="1">
        <param name="playcount" value="0">
    </object>

  </body>
</html>
